<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-users home-icon"></i>
            <a href="#">基础管理</a>
        </li>
        <li class="active">轮播图列表</li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">轮播图列表</h4>
            <div class="row">
                <div class="col-sm-2">
                    <a id="addManager" href="#manager-modal" data-toggle="modal"
                       class="btn btn-sm btn-success">
                        <i class="fa fa-plus"></i> 添加轮播图
                    </a>
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="company-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="center">序号</th>
                        <th>图片</th>
                        <th>跳转页面</th>
                        <th>发布时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div id="manager-modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog" style="width: 50%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                    </button>
                    <h5 class="modal-title">新增轮播图</h5>
                </div>
                <div class="modal-body">
                    <form id="manager-form" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="image"> 图片：</label>
                            <div class="col-sm-7">
                                <div class="clearfix">
                                    <input type="file" id="image" name="image" class="col-xs-8"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="type"> 跳转页面：</label>
                            <div class="col-sm-7">
                                <select class="form-control input-sm" id="type" name="type">
                                    <option value="1">&nbsp;&nbsp;&nbsp;&nbsp;折扣商品列表&nbsp;&nbsp;&nbsp;&nbsp;</option>
                                    <option value="2">&nbsp;&nbsp;&nbsp;&nbsp;树苗商品列表&nbsp;&nbsp;&nbsp;&nbsp;</option>
                                    <option value="3">&nbsp;&nbsp;&nbsp;&nbsp;果树商品列表&nbsp;&nbsp;&nbsp;&nbsp;</option>
                                    <option value="4">&nbsp;&nbsp;&nbsp;&nbsp;水果商品列表&nbsp;&nbsp;&nbsp;&nbsp;</option>
                                    <option value="5">&nbsp;&nbsp;&nbsp;&nbsp;积分商品列表&nbsp;&nbsp;&nbsp;&nbsp;</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="status"> 状态：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <label>
                                        <input id="status" name="status" class="ace ace-switch ace-switch-4 btn-flat"
                                               type="checkbox">
                                        <span class="lbl"
                                              data-lbl="显示 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 关闭"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                            class="fa fa-undo"></i> 取消
                    </button>
                    <button id="save-manager-btn" type="button" class="btn btn-sm btn-primary"><i
                            class="fa fa-check"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var company_table;
        $(function () {

            var initParam = $("#searchForm").serialize();
            company_table = $('#company-table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'homePage/getImageList?' + initParam
                },
                fnDrawCallback: function () {
                    this.api().column(0, {
                        search: 'applied',
                        order: 'applied'
                    }).nodes().each(function (cell, i) {
                        cell.innerHTML = i + 1;
                    });
                },
                columns: [
                    {
                        data: null,
                        targets: 0
                    }, {
                        data: function (row) {
                            return "<a target='_blank' href='" + row.imageUrl + "'><img class='img-thumbnail' style='height: 70px;width: auto;' src='" + row.imageUrl + "'></a>";
                        }
                    }, {
                        data: function (row) {
                            if (row.type === 1) {
                                return '折扣商品列表'
                            }
                            if (row.type === 2) {
                                return '树苗商品列表'
                            }
                            if (row.type === 3) {
                                return '果树商品列表'
                            }
                            if (row.type === 4) {
                                return '水果商品列表'
                            }
                            if (row.type === 5) {
                                return '积分商品列表'
                            }
                        }
                    }
                    , {
                        data: 'createTime',
                        defaultContent: ''
                    },
                    {
                        data: function (row) {
                            return row.status ? "显示" : "关闭";
                        }
                    }, {
                        data: function (row) {
                            var edit = '&nbsp;&nbsp;<a  href="javascript:;" data-id="' + row.id + '" data-status="' + row.status + '"  class="btn btn-xs btn-primary audit"><i class="fa fa-pencil"></i>' + (row.status ? "关闭" : "显示") + "</a>";
                            return edit;
                        }
                    }
                ]
            });

            $('#image').ace_file_input({
                no_file: '选择文件 ...',
                btn_choose: '选择',
                btn_change: '更改',
                droppable: false,
                onchange: null,
                thumbnail: false,//| true | large
                whitelist: 'gif|png|jpg|jpeg'
                //blacklist:'exe|php'
            });

            $('#searchBtn').click(function () {
                var param = $("#searchForm").serialize();
                company_table.ajax.url("homePage/getImageList?" + param).load();
            });

            //初始化表单校验
            video_validator = $("#manager-form").validate({
                errorElement: 'div',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    title: {
                        required: true
                    },
                    image: {
                        required: true
                    },

                },
                messages: {
                    title: {
                        required: "图片标题不能为空"
                    },
                    image: {
                        required: "图片不能为空"
                    },

                }, highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                }, success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                    $(e).remove();
                }, errorPlacement: function (error, element) {
                    if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                        var controls = element.closest('div[class*="col-"]');
                        if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                        else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                    } else if (element.is('.select2')) {
                        error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                    }
                    else if (element.is('.chosen-select')) {
                        error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                    }
                    else {
                        error.insertAfter(element.parent());
                    }
                }
            });

            //显示或关闭
            $("#company-table tbody").on("click", ".audit", function () {
                $.post("homePage/modifyStatus/" + $(this).data("id"), {}, function () {
                    bootbox.alert("显示或关闭成功！");
                    company_table.ajax.reload();
                });
            });

            //点击图片，修改图片
            $("#company-table tbody").on("change", ".imageUpload", function () {

                var id = $(this).parents().find(".imageForm").data("id");
//                $(this).parents().find(".imageForm").ajaxSubmit({
//                    url: 'homePage/updateImage/'+id,
//                    type: 'post',
//                    success: function (data) {
//                        company_table.ajax.reload();
//                    }

//                })
                var formData = new FormData($(this).parents().find(".imageForm")[0]);
                $.ajax({
                    url: 'homePage/updateImage/' + id,
                    type: 'POST',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (msg) {
                        company_table.ajax.reload();
                    },
                    error: function (returndata) {
                        alert("提交失败");
                    }
                });
            })


            $("#save-manager-btn").click(function () {


                if ($("#manager-form").valid()) {
                    $("#manager-form").ajaxSubmit({
                        url: 'homePage/saveImage',
                        type: 'post',
                        success: function (data) {
                            company_table.ajax.reload();
                            $(".modal-title").html("新增轮播图");
                            $("#manager-modal").modal("hide");
                        }
                    });
                }
                return false;
            });

            //模态框隐藏事件
            $("#manager-modal").on("hide.bs.modal", function () {
                $("#manager-form")[0].reset();
                video_validator.resetForm();
                $("#manager-form .form-group").removeClass("has-error");
            });

        });
    </script>
</div>